﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>时间轴</title>
    <link rel="shortcut icon" href="../static/image/favicon.ico" th:href="@{/image/favicon.ico}"/>
    <link rel="stylesheet" href="../static/css/semantic.min.css" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" href="../static/css/icon.min.css" th:href="@{/css/icon.min.css}">
    <link rel="stylesheet" href="../static/css/mine.css" th:href="@{/css/mine.css}">
    <link rel="stylesheet" href="../static/lib/photopile/css/normalize.css"
          th:href="@{/lib/photopile/css/normalize.css}"><!--CSS RESET-->
    <link rel="stylesheet" href="../static/lib/photopile/css/base.css" th:href="@{/lib/photopile/css/base.css}">
    <!--演示页面样式，使用时可以不引用-->
    <link rel="stylesheet" href="../static/lib/photopile/css/photopile.css"
          th:href="@{/lib/photopile/css/photopile.css}">
    <link rel="stylesheet" href="../static/lib/photopile/css/demo.css" th:href="@{/lib/photopile/css/demo.css}">
</head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
<script src="../static/lib/photopile/js/jquery-ui.min.js" th:src="@{/lib/photopile/js/jquery-ui.min.js}"></script>
<script src="../static/lib/photopile/js/jquery.ui.touch-punch.min.js"
        th:src="@{/lib/photopile/js/jquery.ui.touch-punch.min.js}"></script>
<script src="../static/lib/photopile/js/photopile.js" th:src="@{/lib/photopile/js/photopile.js}"></script>

<body>
<!--导航 -->
<nav th:replace="_fragments::menu(5)">
</nav>
<!-- 中间内容 -->
<div class="mine-container mine-padded-tb-large">
    <div class="ui container">
        <div class="ui stackable grid">
            <div class="photopile-wrapper">
                <ul class="photopile">
                    <li th:each="picture : ${pictures}">
                        <a href="#" th:href="@{${picture.picInfo}}">
                            <img src="#"
                                 th:src="@{${picture.picInfo}}"
                                 alt="Barton Dam, Ann Arbor, Michigan"
                                 th:alt="${picture.picDesc}"
                                 width="133" height="100"/>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- 底部 -->
<footer th:replace="_fragments::footer">
</footer>

<script>
    $(function () {
        PhotoPile().scatter();
    });
</script>

<div style="text-align:center;clear:both;">
    <!--<script src="../static/lib/photopile/gg_bd_ad_720x90.js" th:src="@{/lib/photopile/gg_bd_ad_720x90.js}"></script>-->
    <!--<script src="../static/lib/photopile/follow.js" th:src="@{/lib/photopile/follow.js}"></script>-->
</div>

</body>
</html>

